<%--
  Created by IntelliJ IDEA.
  User: 付志玲
  Date: 2025/6/3
  Time: 下午9:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<html>--%>
<%--<head>--%>
<%--    <title>Title</title>--%>
<%--</head>--%>
<%--<body>--%>
<%--你好--%>
<%--</body>--%>
<%--</html>--%>
<%--<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>--%>

<%@ page import="java.sql.*" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生学籍管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0A2463',
                        accent: '#3E92CC',
                        neutral: '#F5F7FA',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors;
            }
            .btn-secondary {
                @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors;
            }
            .status-badge {
                @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }
        }
    </style>

    <style>
        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }

        /* 表格样式 */
        .table-responsive {
            overflow-x: auto;
        }

        /* 状态徽章样式 */
        .status-active {
            @apply bg-green-100 text-green-800;
        }
        .status-graduated {
            @apply bg-blue-100 text-blue-800;
        }
        .status-suspended {
            @apply bg-yellow-100 text-yellow-800;
        }
        .status-dropout {
            @apply bg-red-100 text-red-800;
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-primary shadow-md fixed top-0 left-0 right-0 z-30">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <div class="flex items-center space-x-2">
                <i class="fa fa-graduation-cap text-white text-2xl"></i>
                <h1 class="text-xl font-bold text-white">学生学籍管理系统</h1>
            </div>
        </div>

        <div class="flex items-center space-x-4">
            <div class="flex items-center space-x-2 cursor-pointer group">
                <i class="fa fa-user-circle-o text-white text-xl"></i>
                <span class="hidden sm:block font-medium text-white">管理员</span>
            </div>
        </div>
    </div>
</header>

<div class="flex pt-16 min-h-screen">
    <!-- 侧边栏导航 -->
    <aside class="hidden md:block w-64 bg-white shadow-sm border-r border-gray-200">
        <div class="p-4">
            <nav class="space-y-1">
                <a href="#" class="flex items-center px-4 py-3 text-primary bg-blue-50 rounded-lg">
                    <i class="fa fa-graduation-cap w-5 h-5 mr-3"></i>
                    <span class="font-medium">学籍管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
                    <i class="fa fa-book w-5 h-5 mr-3"></i>
                    <span>课程管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
                    <i class="fa fa-list-alt w-5 h-5 mr-3"></i>
                    <span>成绩管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
                    <i class="fa fa-users w-5 h-5 mr-3"></i>
                    <span>教师管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
                    <i class="fa fa-cog w-5 h-5 mr-3"></i>
                    <span>系统设置</span>
                </a>
            </nav>
        </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="flex-1 p-4 sm:p-6">
        <div class="fade-in">
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">学生学籍管理</h2>
                <p class="text-gray-500 mt-1">查看和管理学生的学籍信息</p>
            </div>

            <!-- 搜索和筛选 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                <form action="student_management.jsp" method="get">
                    <div class="flex flex-col sm:flex-row gap-4">
                        <div class="flex-1">
                            <label for="search-student" class="block text-sm font-medium text-gray-700 mb-1">搜索学生</label>
                            <div class="relative">
                                <input type="text" id="search-student" name="keyword" placeholder="输入学号、姓名或专业..."
                                       value="<%= request.getParameter("keyword") != null ? request.getParameter("keyword") : "" %>"
                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30">
                                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                            </div>
                        </div>

                        <div class="w-full sm:w-48">
                            <label for="status-filter" class="block text-sm font-medium text-gray-700 mb-1">就读状态</label>
                            <select id="status-filter" name="status"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30">
                                <option value="all" <%= request.getParameter("status") == null || request.getParameter("status").equals("all") ? "selected" : "" %>>全部</option>
                                <option value="active" <%= request.getParameter("status") != null && request.getParameter("status").equals("active") ? "selected" : "" %>>在读</option>
                                <option value="graduated" <%= request.getParameter("status") != null && request.getParameter("status").equals("graduated") ? "selected" : "" %>>已毕业</option>
                                <option value="suspended" <%= request.getParameter("status") != null && request.getParameter("status").equals("suspended") ? "selected" : "" %>>休学</option>
                                <option value="dropout" <%= request.getParameter("status") != null && request.getParameter("status").equals("dropout") ? "selected" : "" %>>退学</option>
                            </select>
                        </div>

                        <div class="w-full sm:w-48">
                            <label for="grade-filter" class="block text-sm font-medium text-gray-700 mb-1">入学年份</label>
                            <select id="grade-filter" name="grade"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30">
                                <option value="all" <%= request.getParameter("grade") == null || request.getParameter("grade").equals("all") ? "selected" : "" %>>全部</option>
                                <option value="2025" <%= request.getParameter("grade") != null && request.getParameter("grade").equals("2025") ? "selected" : "" %>>2025级</option>
                                <option value="2024" <%= request.getParameter("grade") != null && request.getParameter("grade").equals("2024") ? "selected" : "" %>>2024级</option>
                                <option value="2023" <%= request.getParameter("grade") != null && request.getParameter("grade").equals("2023") ? "selected" : "" %>>2023级</option>
                                <option value="2022" <%= request.getParameter("grade") != null && request.getParameter("grade").equals("2022") ? "selected" : "" %>>2022级</option>
                                <option value="2021" <%= request.getParameter("grade") != null && request.getParameter("grade").equals("2021") ? "selected" : "" %>>2021级</option>
                            </select>
                        </div>

                        <div class="flex items-end">
                            <button type="submit" class="btn-primary">
                                <i class="fa fa-search mr-2"></i> 搜索
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 学生列表 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="bg-gray-50 px-6 py-3 border-b border-gray-200">
                    <div class="flex justify-between items-center">
                        <h3 class="font-medium text-gray-900">学生学籍信息列表</h3>
                        <div class="text-sm text-gray-500">
                            共 <span id="student-count"><%= request.getAttribute("totalCount") != null ? request.getAttribute("totalCount") : "0" %></span> 名学生
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="min-w-full">
                        <thead>
                        <tr class="bg-gray-50 border-b border-gray-200">
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学号</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">性别</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">专业</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">入学时间</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">预计毕业时间</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">就读状态</th>
                            <th class="py-3 px-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200" id="student-tbody">
                        <%
                            List<Student> students = (List<Student>) request.getAttribute("students");
                            if (students != null && !students.isEmpty()) {
                                for (Student student : students) {
                        %>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-4 text-sm font-medium"><%= student.getId() %></td>
                            <td class="py-3 px-4 text-sm"><%= student.getName() %></td>
                            <td class="py-3 px-4 text-sm"><%= student.getGender() %></td>
                            <td class="py-3 px-4 text-sm"><%= student.getMajor() %></td>
                            <td class="py-3 px-4 text-sm"><%= student.getEnrollmentDate() %></td>
                            <td class="py-3 px-4 text-sm"><%= student.getGraduationDate() %></td>
                            <td class="py-3 px-4 text-sm">
                                <span class="status-badge <%= getStatusClass(student.getStatus()) %>"><%= getStatusText(student.getStatus()) %></span>
                            </td>
                            <td class="py-3 px-4 text-right">
                                <button class="view-detail-btn text-primary hover:text-primary/80"
                                        data-id="<%= student.getId() %>">
                                    <i class="fa fa-eye mr-1"></i> 查看详情
                                </button>
                            </td>
                        </tr>
                        <%
                            }
                        } else {
                        %>
                        <tr>
                            <td colspan="8" class="py-6 px-4 text-center text-gray-500">
                                <div class="flex flex-col items-center">
                                    <i class="fa fa-info-circle text-2xl text-gray-400 mb-2"></i>
                                    <p>没有找到符合条件的学生记录</p>
                                </div>
                            </td>
                        </tr>
                        <% } %>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
                    <div class="flex-1 flex justify-between sm:hidden">
                        <a href="student_management.jsp?page=<%= request.getAttribute("currentPage") != null && (int)request.getAttribute("currentPage") > 1 ? (int)request.getAttribute("currentPage") - 1 : 1 %>&keyword=<%= request.getParameter("keyword") != null ? request.getParameter("keyword") : "" %>&status=<%= request.getParameter("status") != null ? request.getParameter("status") : "all" %>&grade=<%= request.getParameter("grade") != null ? request.getParameter("grade") : "all" %>"
                           class="btn-secondary">上一页</a>
                        <a href="student_management.jsp?page=<%= request.getAttribute("currentPage") != null && (int)request.getAttribute("currentPage") < (int)request.getAttribute("totalPages") ? (int)request.getAttribute("currentPage") + 1 : (int)request.getAttribute("totalPages") %>"
                           class="btn-secondary">下一页</a>
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                显示第 <span class="font-medium"><%= request.getAttribute("startIndex") != null ? request.getAttribute("startIndex") : "0" %></span> 至 <span class="font-medium"><%= request.getAttribute("endIndex") != null ? request.getAttribute("endIndex") : "0" %></span> 条，共 <span class="font-medium"><%= request.getAttribute("totalCount") != null ? request.getAttribute("totalCount") : "0" %></span> 条结果
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                <a href="student_management.jsp?page=1&keyword=<%= request.getParameter("keyword") != null ? request.getParameter("keyword") : "" %>&status=<%= request.getParameter("status") != null ? request.getParameter("status") : "all" %>&grade=<%= request.getParameter("grade") != null ? request.getParameter("grade") : "all" %>"
                                   class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">首页</span>
                                    <i class="fa fa-angle-double-left"></i>
                                </a>
                                <a href="student_management.jsp?page=<%= request.getAttribute("currentPage") != null && (int)request.getAttribute("currentPage") > 1 ? (int)request.getAttribute("currentPage") - 1 : 1 %>&keyword=<%= request.getParameter("keyword") != null ? request.getParameter("keyword") : "" %>&status=<%= request.getParameter("status") != null ? request.getParameter("status") : "all" %>&grade=<%= request.getParameter("grade") != null ? request.getParameter("grade") : "all" %>"
                                   class="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">上一页</span>
                                    <i class="fa fa-chevron-left"></i>
                                </a>

                                <%
                                    int currentPage = request.getAttribute("currentPage") != null ? (int)request.getAttribute("currentPage") : 1;
                                    int totalPages = request.getAttribute("totalPages") != null ? (int)request.getAttribute("totalPages") : 1;
                                    int startPage = Math.max(1, currentPage - 2);
                                    int endPage = Math.min(totalPages, startPage + 4);

                                    for (int i = startPage; i <= endPage; i++) {
                                %>
                                <a href="student_management.jsp?page=<%= i %>&keyword=<%= request.getParameter("keyword") != null ? request.getParameter("keyword") : "" %>&status=<%= request.getParameter("status") != null ? request.getParameter("status") : "all" %>&grade=<%= request.getParameter("grade") != null ? request.getParameter("grade") : "all" %>"
                                   class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-<%= i == currentPage ? "primary" : "white" %> text-sm font-medium text-<%= i == currentPage ? "white" : "gray-700" %> hover:bg-gray-50">
                                    <%= i %>
                                </a>
                                <% } %>

                                <a href="student_management.jsp?page=<%= request.getAttribute("currentPage") != null && (int)request.getAttribute("currentPage") < (int)request.getAttribute("totalPages") ? (int)request.getAttribute("currentPage") + 1 : (int)request.getAttribute("totalPages") %>&keyword=<%= request.getParameter("keyword") != null ? request.getParameter("keyword") : "" %>&status=<%= request.getParameter("status") != null ? request.getParameter("status") : "all" %>&grade=<%= request.getParameter("grade") != null ? request.getParameter("grade") : "all" %>"
                                   class="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">下一页</span>
                                    <i class="fa fa-chevron-right"></i>
                                </a>
                                <a href="student_management.jsp?page=<%= request.getAttribute("totalPages") != null ? request.getAttribute("totalPages") : "1" %>&keyword=<%= request.getParameter("keyword") != null ? request.getParameter("keyword") : "" %>&status=<%= request.getParameter("status") != null ? request.getParameter("status") : "all" %>&grade=<%= request.getParameter("grade") != null ? request.getParameter("grade") : "all" %>"
                                   class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">末页</span>
                                    <i class="fa fa-angle-double-right"></i>
                                </a>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- 学生详情模态框 -->
<div id="student-detail-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
    <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity"></div>
    <div class="relative bg-white rounded-lg shadow-xl w-full max-w-4xl mx-4 overflow-hidden transform transition-all max-h-[90vh] flex flex-col">
        <div class="bg-primary text-white px-6 py-4 flex justify-between items-center">
            <h3 id="detail-modal-title" class="text-lg font-medium">学生学籍详情</h3>
            <button id="close-detail-modal" class="text-white hover:text-gray-200">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-6 overflow-y-auto flex-1">
            <div id="student-detail-content">
                <!-- 学生详情内容将通过JavaScript动态填充 -->
            </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
            <button id="close-detail-btn" class="btn-secondary">关闭</button>
        </div>
    </div>
</div>

<!-- 操作结果提示 -->
<div id="toast" class="fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transform transition-all duration-300 opacity-0 translate-y-[-20px] max-w-sm">
    <div class="flex items-center">
        <i id="toast-icon" class="mr-3 text-xl"></i>
        <div>
            <p id="toast-message" class="text-sm font-medium"></p>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const studentDetailModal = document.getElementById('student-detail-modal');
        const closeDetailModalBtn = document.getElementById('close-detail-modal');
        const closeDetailBtn = document.getElementById('close-detail-btn');
        const studentDetailContent = document.getElementById('student-detail-content');
        const toast = document.getElementById('toast');

        // 显示提示消息
        function showToast(message, type) {
            const toastIcon = document.getElementById('toast-icon');
            const toastMessage = document.getElementById('toast-message');

            // 设置提示类型样式
            if (type === 'success') {
                toast.classList.add('bg-green-50', 'border-l-4', 'border-green-500', 'text-green-700');
                toast.classList.remove('bg-red-50', 'border-l-4', 'border-red-500', 'text-red-700');
                toastIcon.classList.add('fa-check-circle', 'text-green-500');
                toastIcon.classList.remove('fa-exclamation-circle', 'text-red-500');
            } else {
                toast.classList.add('bg-red-50', 'border-l-4', 'border-red-500', 'text-red-700');
                toast.classList.remove('bg-green-50', 'border-l-4', 'border-green-500', 'text-green-700');
                toastIcon.classList.add('fa-exclamation-circle', 'text-red-500');
                toastIcon.classList.remove('fa-check-circle', 'text-green-500');
            }

            toastMessage.textContent = message;
            toast.classList.remove('opacity-0', 'translate-y-[-20px]');

            // 3秒后自动隐藏
            setTimeout(() => {
                toast.classList.add('opacity-0', 'translate-y-[-20px]');
            }, 3000);
        }

        // 显示学生详情
        function showStudentDetail(studentId) {
            // 显示加载状态
            studentDetailContent.innerHTML = `
                    <div class="flex items-center justify-center py-12">
                        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                        <p class="ml-3 text-gray-500">加载学生信息中...</p>
                    </div>
                `;

            // 显示模态框
            studentDetailModal.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');

            // 通过AJAX获取学生详情
            const xhr = new XMLHttpRequest();
            xhr.open('GET', `get_student_detail.jsp?id=${studentId}`, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const student = JSON.parse(xhr.responseText);

                    if (student) {
                        // 根据状态设置徽章样式
                        let statusClass = '';
                        switch(student.status) {
                            case 'active':
                                statusClass = 'status-active';
                                break;
                            case 'graduated':
                                statusClass = 'status-graduated';
                                break;
                            case 'suspended':
                                statusClass = 'status-suspended';
                                break;
                            case 'dropout':
                                statusClass = 'status-dropout';
                                break;
                        }

                        // 填充详情内容
                        studentDetailContent.innerHTML = `
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    <div class="md:col-span-1">
                                        <div class="bg-gray-50 rounded-lg p-6 text-center">
                                            <div class="w-24 h-24 mx-auto bg-primary/10 rounded-full flex items-center justify-center mb-4">
                                                <i class="fa fa-user text-4xl text-primary"></i>
                                            </div>
                                            <h4 class="text-lg font-bold text-gray-900">${student.name}</h4>
                                            <p class="text-sm text-gray-500 mt-1">${student.id}</p>
                                            <div class="mt-4">
                                                <span class="status-badge ${statusClass}">${getStatusText(student.status)}</span>
                                            </div>
                                            <div class="mt-6 space-y-3">
                                                <div class="flex items-center justify-between">
                                                    <span class="text-sm text-gray-500">学院</span>
                                                    <span class="text-sm font-medium">${student.department}</span>
                                                </div>
                                                <div class="flex items-center justify-between">
                                                    <span class="text-sm text-gray-500">专业</span>
                                                    <span class="text-sm font-medium">${student.major}</span>
                                                </div>
                                                <div class="flex items-center justify-between">
                                                    <span class="text-sm text-gray-500">班级</span>
                                                    <%--<span class="text-sm font-medium">${student.class}</span>--%>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="md:col-span-2">
                                        <div class="bg-gray-50 rounded-lg p-6 mb-6">
                                            <h4 class="text-lg font-medium text-gray-900 mb-4">基本信息</h4>
                                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                                <div>
                                                    <label class="block text-sm text-gray-500 mb-1">性别</label>
                                                    <p class="text-sm font-medium">${student.gender}</p>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-500 mb-1">出生日期</label>
                                                    <p class="text-sm font-medium">${student.birthday}</p>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-500 mb-1">身份证号</label>
                                                    <p class="text-sm font-medium">${student.idNumber}</p>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-500 mb-1">联系电话</label>
                                                    <p class="text-sm font-medium">${student.phone}</p>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-500 mb-1">电子邮箱</label>
                                                    <p class="text-sm font-medium">${student.email}</p>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-500 mb-1">家庭住址</label>
                                                    <p class="text-sm font-medium">${student.address}</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="bg-gray-50 rounded-lg p-6 mb-6">
                                            <h4 class="text-lg font-medium text-gray-900 mb-4">学籍信息</h4>
                                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                                <div>
                                                    <label class="block text-sm text-gray-500 mb-1">入学时间</label>
                                                    <p class="text-sm font-medium">${student.enrollmentDate}</p>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-500 mb-1">预计毕业时间</label>
                                                    <p class="text-sm font-medium">${student.graduationDate}</p>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-500 mb-1">入学分数</label>
                                                    <p class="text-sm font-medium">${student.entranceScore}</p>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-500 mb-1">奖学金情况</label>
                                                    <p class="text-sm font-medium">${student.scholarship || '无'}</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="bg-gray-50 rounded-lg p-6">
                                            <h4 class="text-lg font-medium text-gray-900 mb-4">奖励与荣誉</h4>
                                            <p class="text-sm">${student.awards || '暂无记录'}</p>
                                        </div>
                                    </div>
                                </div>
                            `;
                    } else {
                        studentDetailContent.innerHTML = `
                                <div class="flex items-center justify-center py-12">
                                    <i class="fa fa-exclamation-circle text-2xl text-red-500 mr-3"></i>
                                    <p class="text-gray-700">未找到该学生信息</p>
                                </div>
                            `;
                    }
                } else if (xhr.readyState === 4) {
                    studentDetailContent.innerHTML = `
                            <div class="flex items-center justify-center py-12">
                                <i class="fa fa-exclamation-triangle text-2xl text-yellow-500 mr-3"></i>
                                <p class="text-gray-700">加载学生信息失败，请稍后重试</p>
                            </div>
                        `;
                }
            };
            xhr.send();
        }

        // 获取状态文本
        function getStatusText(status) {
            switch(status) {
                case 'active': return '在读';
                case 'graduated': return '已毕业';
                case 'suspended': return '休学';
                case 'dropout': return '退学';
                default: return '未知';
            }
        }

        // 关闭学生详情模态框
        function closeStudentDetailModal() {
            studentDetailModal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }

        // 添加查看详情按钮事件监听
        document.querySelectorAll('.view-detail-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const studentId = this.dataset.id;
                showStudentDetail(studentId);
            });
        });

        // 事件监听
        closeDetailModalBtn.addEventListener('click', closeStudentDetailModal);
        closeDetailBtn.addEventListener('click', closeStudentDetailModal);
    });
</script>

<!-- 学生实体类 -->
<%!
    class Student {
        private String id;
        private String name;
        private String gender;
        private String major;
        private String department;
        private String className;
        private String enrollmentDate;
        private String graduationDate;
        private String status;
        private String birthday;
        private String idNumber;
        private String phone;
        private String email;
        private String address;
        private int entranceScore;
        private String scholarship;
        private String awards;

        // Getters and Setters
        public String getId() { return id; }
        public void setId(String id) { this.id = id; }

        public String getName() { return name; }
        public void setName(String name) { this.name = name; }

        public String getGender() { return gender; }
        public void setGender(String gender) { this.gender = gender; }

        public String getMajor() { return major; }
        public void setMajor(String major) { this.major = major; }

        public String getDepartment() { return department; }
        public void setDepartment(String department) { this.department = department; }
//
//        public String getClass() { return className; }
//        public void setClass(String className) { this.className = className; }

        public String getEnrollmentDate() { return enrollmentDate; }
        public void setEnrollmentDate(String enrollmentDate) { this.enrollmentDate = enrollmentDate; }

        public String getGraduationDate() { return graduationDate; }
        public void setGraduationDate(String graduationDate) { this.graduationDate = graduationDate; }

        public String getStatus() { return status; }
        public void setStatus(String status) { this.status = status; }

        public String getBirthday() { return birthday; }
        public void setBirthday(String birthday) { this.birthday = birthday; }

        public String getIdNumber() { return idNumber; }
        public void setIdNumber(String idNumber) { this.idNumber = idNumber; }

        public String getPhone() { return phone; }
        public void setPhone(String phone) { this.phone = phone; }

        public String getEmail() { return email; }
        public void setEmail(String email) { this.email = email; }

        public String getAddress() { return address; }
        public void setAddress(String address) { this.address = address; }

        public int getEntranceScore() { return entranceScore; }
        public void setEntranceScore(int entranceScore) { this.entranceScore = entranceScore; }

        public String getScholarship() { return scholarship; }
        public void setScholarship(String scholarship) { this.scholarship = scholarship; }

        public String getAwards() { return awards; }
        public void setAwards(String awards) { this.awards = awards; }
    }

    // 获取状态对应的CSS类
    private String getStatusClass(String status) {
        switch(status) {
            case "active": return "status-active";
            case "graduated": return "status-graduated";
            case "suspended": return "status-suspended";
            case "dropout": return "status-dropout";
            default: return "";
        }
    }

    // 获取状态文本
    private String getStatusText(String status) {
        switch(status) {
            case "active": return "在读";
            case "graduated": return "已毕业";
            case "suspended": return "休学";
            case "dropout": return "退学";
            default: return "未知";
        }
    }
%>

<%
    // 数据库连接参数
    String driver = "com.mysql.cj.jdbc.Driver";
    String url = "jdbc:mysql://localhost:3306/student_management?useSSL=false&serverTimezone=UTC";
    String username = "root";
    String password = "password";

    // 获取请求参数
    String keyword = request.getParameter("keyword");
    String status = request.getParameter("status");
    String grade = request.getParameter("grade");
    int currentpage = 1;
    int pageSize = 10;

    if (request.getParameter("page") != null) {
        try {
            currentpage = Integer.parseInt(request.getParameter("page"));
        } catch (NumberFormatException e) {
            currentpage = 1;
        }
    }

    Connection conn = null;
    PreparedStatement stmt = null;
    ResultSet rs = null;

    try {
        // 加载数据库驱动
        Class.forName(driver);

        // 建立数据库连接
        conn = DriverManager.getConnection(url, username, password);

        // 构建查询条件
        StringBuilder condition = new StringBuilder();
        List<Object> params = new ArrayList<>();

        if (keyword != null && !keyword.trim().isEmpty()) {
            condition.append(" AND (s.student_id LIKE ? OR s.name LIKE ? OR s.major LIKE ?)");
            params.add("%" + keyword + "%");
            params.add("%" + keyword + "%");
            params.add("%" + keyword + "%");
        }

        if (status != null && !status.equals("all")) {
            condition.append(" AND s.status = ?");
            params.add(status);
        }

        if (grade != null && !grade.equals("all")) {
            condition.append(" AND YEAR(s.enrollment_date) = ?");
            params.add(grade);
        }

        // 查询学生总数
        String countSql = "SELECT COUNT(*) FROM student s WHERE 1=1" + condition.toString();
        stmt = conn.prepareStatement(countSql);

        for (int i = 0; i < params.size(); i++) {
            stmt.setObject(i + 1, params.get(i));
        }

        rs = stmt.executeQuery();
        int totalCount = 0;
        if (rs.next()) {
            totalCount = rs.getInt(1);
        }
        request.setAttribute("totalCount", totalCount);

        // 计算总页数和当前页范围
        int totalpages = (int) Math.ceil((double) totalCount / pageSize);
        currentpage = Math.max(1, Math.min(currentpage, totalpages));
        int startIndex = (currentpage - 1) * pageSize + 1;
        int endIndex = Math.min(currentpage * pageSize, totalCount);

        request.setAttribute("currentPage", currentpage);
        request.setAttribute("totalPages", totalpages);
        request.setAttribute("startIndex", startIndex);
        request.setAttribute("endIndex", endIndex);

        // 查询学生列表
        String sql = "SELECT s.student_id, s.name, s.gender, s.major, s.department, s.class_name, " +
                "s.enrollment_date, s.graduation_date, s.status, s.birthday, s.id_number, " +
                "s.phone, s.email, s.address, s.entrance_score, s.scholarship, s.awards " +
                "FROM student s WHERE 1=1" + condition.toString() +
                " ORDER BY s.enrollment_date DESC, s.student_id ASC " +
                "LIMIT ?, ?";

        stmt = conn.prepareStatement(sql);

        for (int i = 0; i < params.size(); i++) {
            stmt.setObject(i + 1, params.get(i));
        }

        stmt.setInt(params.size() + 1, (currentpage - 1) * pageSize);
        stmt.setInt(params.size() + 2, pageSize);

        rs = stmt.executeQuery();

        List<Student> Students = new ArrayList<>();

        while (rs.next()) {
            Student student = new Student();
            student.setId(rs.getString("student_id"));
            student.setName(rs.getString("name"));
            student.setGender(rs.getString("gender"));
            student.setMajor(rs.getString("major"));
            student.setDepartment(rs.getString("department"));
//            student.setClass(rs.getString("class_name"));
            student.setEnrollmentDate(rs.getString("enrollment_date"));
            student.setGraduationDate(rs.getString("graduation_date"));
            student.setStatus(rs.getString("status"));
            student.setBirthday(rs.getString("birthday"));
            student.setIdNumber(rs.getString("id_number"));
            student.setPhone(rs.getString("phone"));
            student.setEmail(rs.getString("email"));
            student.setAddress(rs.getString("address"));
            student.setEntranceScore(rs.getInt("entrance_score"));
            student.setScholarship(rs.getString("scholarship"));
            student.setAwards(rs.getString("awards"));

            Students.add(student);
        }

        request.setAttribute("students", Students);

    } catch (Exception e) {
        e.printStackTrace();
        // 处理异常
    } finally {
        // 关闭资源
        try {
            if (rs != null) rs.close();
            if (stmt != null) stmt.close();
            if (conn != null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
%>
</body>
</html>